<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no,width=device-width,height=device-height"/>
    <meta name="x5-video-player-type" content="h5">
    <meta name="x5-video-player-fullscreen" content="false">
    <meta name="x5-video-orientation" content="portraint">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <title>指导中心</title>
    <link rel="stylesheet" href="../../../css/mui.min.css" />
    <script src="../../../js/mui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../css/app.css" />
    <link rel="stylesheet" href="../../../npl/css/vant.mini.css" />
    <script src="../../../js/jquery-3.6.0.min.js"></script>
    <script src="../../../js/flexible.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/sm2.js"></script>
    <script src="../../../js/sm3.js"></script>
    <script src="../../../js/clipboard.js"></script>
    <script src="../../../npl/js/vant.mini.js"></script>
    <script src="../../../js/vconsole.min.js"></script>
    <script src="../../text.js" type="text/javascript"></script>

    <script src="../js/util.js" type="text/javascript"></script>

    <style>
.trainTickets {
    height: 100%;
    background-color: #ffffff;
}

.guidance-main {
    height: calc(100% - 1rem);
}

.guidance-card {
    height: 2.5rem;
    margin: 0.5rem 0.33rem;
    border-radius: 15px;

    align-self: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.guidance-doc {
    background-image: url(../../yr/images/guidance/guidance-doc.png);
}

.guidance-img {
    background-image: url(../../yr/images/guidance/guidance-img.png);
}

.guidance-video {
    background-image: url(../../yr/images/guidance/guidance-video.png);
}

.van-image-preview__image--vertical {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.van-image__img {
    display: block;
    width: 100%;
    height: auto;
}

.van-image-preview__close-icon {
    color: rgba(0,0,0,0.7);
}

/* 错误示例：这会隐藏控件 */
/* video::-webkit-media-controls {
  display: block !important;
} */

video {
    width: 100%;
    height: 100%; /* 保持宽高比 */
    display: block;
    margin: 0 auto;
    background-color: #000;
}
.close-overlay {
    position: absolute;
    z-index: 10002; /* 比视频更高的层级 */
    right: 0;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    top: 16px;
    right: 16px;
}

.item-row {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.item-col {
    display: block;
    height: 2.6rem;
    width: 100%;
    border-radius: 10px;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border: solid 1px #ededed;
}

.video-col {
    display: block;
    height: 2.6rem;
    width: 100%;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.item-header {
    height: 1.8rem;
    align-self: center;
    background-size: cover;
    background-position: center;
    background-image: url(../../yr/images/guidance/doc-img.png);
}

.img-header {
    height: 1.8rem;
    align-self: center;
    background-size: cover;
    background-position: center;
}

.img-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-header {
    height: 1.8rem;
    position: relative;
    align-self: center;
    background-size: cover;
    background-position: center;
}

.video-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.video-duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background-color: #100801;
    color: #FFF;
    padding: 5px;
    border-radius: 8px;
}

.item-title {
    width: 100%;
    display: flex;
    height: 0.8rem;
}

.item-img {
    width: 40px;
    padding: 10px;
}

.item-img img {
    width: 20px;
    align-items: center;
    display: flex;
}

.item-name {
    align-items: center;
    vertical-align: middle;
    display: flex;
    width: calc(100% - 50px);
}

.img-name {
    align-items: center;
    vertical-align: middle;
    display: flex;
    width: 100%;
    padding: 0 10px;
}

.video-name {
    width: 100%;
    padding: 10px;
    text-align: center;
}

.item-text {
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
}

    </style>
</head>
<body>
<div id="app" v-cloak>
    <van-image-preview v-model="fullImageShow" :images="fullImages" 
        min-zoom="1" max-zoom="1"
        :closeable=true @change="onImageChange">
    </van-image-preview>
    <div v-if="isPlay" class="close-overlay" @click.stop="closeVideo()">
        <van-icon name="clear"/>
    </div>
    <video v-if="isPlay"
        id="videoPlayer"
        controls 
        playsinline 
        webkit-playsinline 
        x5-playsinline 
        x5-video-player-type="h5"
        x5-video-player-fullscreen="true"
        preload="metadata"
        autoplay> <!-- 封面图 -->
        <source :src="videoSrc" type="video/mp4">
    </video>

    <div class="is-loading">
        <div class="curtain">
            <div class="loadingBgc">
                <div class="loader"></div>
            </div>
        </div>
    </div>
    <div v-if="!isPlay" class="trainTickets">
        <div class="header_tit">
            <van-nav-bar :title="headerTitle" left-arrow>
                <template #left>
                    <div class="back_l" @click="home">
                        <img src="../../../image/left.png" alt="" />
                    </div>
                </template>
                <template #right>
                </template>
            </van-nav-bar>
        </div>
        <div class="guidance-main" v-if="0 == showType">
            <div class="guidance-card guidance-doc" @click="handleShowList(1)"></div>
            <div class="guidance-card guidance-img" @click="handleShowList(2)"></div>
            <div class="guidance-card guidance-video" @click="handleShowList(3)"></div>
        </div>
        <div class="guidance-main" v-if="1 == showType">
            <div class="item-row">
                <div v-for="(item) in dataList" :key="id" class="item-col" @click="previewFile(item)">
                    <div class="item-header active-brightness"></div>
                    <div class="item-title">
                        <div class="item-img">
                            <img src="../images/pdf.png" alt=""/>
                        </div>
                        <div class="item-name"><span class="item-text">{{item.name}}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="guidance-main" v-if="2 == showType">
            <div class="item-row">
                <div v-for="(item) in dataList" :key="id" class="item-col" @click="handleShowImg(item)">
                    <div class="img-header active-brightness">
                        <img :src="item.imgSrc" alt=""/>
                    </div>
                    <div class="item-title">
                        <div class="img-name"><span class="item-text">{{item.name}}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="guidance-main" v-if="3 == showType">
            <div class="item-row">
                <div v-for="(item) in dataList" :key="id" class="video-col" @click="handleShowVideo(item)">
                    <div class="video-header active-brightness">
                        <div class="video-duration">{{item.duration}}</div>
                        <img :src="item.imgSrc" alt=""/>
                    </div>
                    <div class="item-title">
                        <div class="video-name"><span class="item-text">{{item.name}}</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
    el: '#app',
    data() {
        return {
            isflageIOX: true,

            headerTitle: "指导中心",
            headerTitleMap: {0: "指导中心", 1: "文档列表", 2: "图片列表", 3: "视频列表"},

            showType: 0,
            dataList: [],

            //图片预览
            fullImageShow: false,
            fullImages: [],
            fullImageIndex: 0,

            //视频
            isPlay: false,
            videoSrc: ''
        }
    },
    watch: {
    },
    created() {
        const _this = this
        let jsApiList = []
        $.getScript("../../../js/jweixin-sgccigw-1.0.0.js" /*"js/jweixin-1.0.0.js"*/, function () {
            'use strict';
            wx.ready(function () {
                wx.onHistoryBack(() => {
                    _this.home()
                    return false
                })
            });
            jsApiList = [
                'onHistoryBack',
                'previewFile',
            ];
            wx.config({
                beta: true, // 调用wx.invoke形式的接口值时，该值必须为true。
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: corpid,
                timestamp: '1626832073',
                nonceStr: nonceStr,
                signature: signature,
                jsApiList: jsApiList
            });
        });
    },
    mounted() {
        this.compatibleInput()
    },
    methods: {
        onImageChange(index) {
            this.fullImageIndex = index
        },
        handleShowList(type) {
            this.showType = type
            this.headerTitle = this.headerTitleMap[this.showType]
            this.getGuidanceList(this.showType)
        },
        previewFile(item) {
            var file = {
                name: item.name+".pdf",
                id: item.attachId,
                size: item.attachSize,
            }
            myPreviewFile(file)
        },
        handleShowImg(item) {
            this.fullImageShow = true
            this.fullImages[0] = item.imgSrc
        },
        handleShowVideo(item) {
            this.isPlay = true
            this.videoSrc = item.videoUrl
        },
        closeVideo() {
            const video = document.querySelector('video');
            video.pause();
            this.isPlay = false;
        },
        getGuidanceList(type) {
            if (sessionStorage.getItem("iscp_port")) {
                iscp_port = sessionStorage.getItem("iscp_port");
            } else {
                iscp_port = ""
            }
            const userId = sessionStorage.getItem("userId");
            let data = {
                "type": type,
                "timestamp": new Date().getTime() + "",
            };
            data = JSON.stringify(data)
            let sign = sm3(data);
            let AuthenticationSession = sessionStorage.getItem("Authentication");
            $.ajax({
                url: localUrlLink + iscp_port + "/tjAiAssistant/guidanceInfo/queryList",
                type: "POST",
                async: false, //是否同步，false表示同步请求
                dataType: "json",
                data: data,
                headers: {
                    "Content-Type": "application/json;charset=UTF-8",
                    Authentication: AuthenticationSession,
                    sign: sign
                },
                success: (res, txt, xhr) => {
                    if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                        let Authentication = xhr.getResponseHeader("Authentication")
                        sessionStorage.setItem("Authentication", Authentication);
                        if (res.code == 200) {
                            this.dataList = res.resultValue
                            if(this.dataList && 0 < this.dataList.length) {
                                this.dataList.forEach(item => {
                                    let downId = ''
                                    if(2 == item.type) {
                                        downId = item.attachId
                                    }else if(3 == item.type) {
                                        downId = item.coverAttachId

                                        videoId = item.attachId
                                        let downUrl = localUrlLink + iscp_port + '/tjAiAssistant/common/download';
                                        downUrl += '?id=' + videoId + '&userId=' + userId;
                                        let Authentication = sessionStorage.getItem("Authentication");
                                        let timestamp = new Date().getTime()+"";
                                        let sign = sm3(timestamp + '&' + videoId)
                                        downUrl += '&Authentication=' + Authentication + '&timestamp=' + timestamp + '&sign=' + sign;
                                        item.videoUrl = downUrl

                                        item.duration = this.getDuration(item.videoDuration)
                                    }
                                    if(2 == item.type || 3 == item.type) {
                                        let downUrl = localUrlLink + iscp_port + '/tjAiAssistant/common/download';
                                        downUrl += '?id=' + downId + '&userId=' + userId;
                                        let Authentication = sessionStorage.getItem("Authentication");
                                        let timestamp = new Date().getTime()+"";
                                        let sign = sm3(timestamp + '&' + downId)
                                        downUrl += '&Authentication=' + Authentication + '&timestamp=' + timestamp + '&sign=' + sign;
                                        item.imgSrc = downUrl
                                    }
                                })
                            }
                        } else {
                            mui.toast("请求异常,请稍后再试", {
                                duration: 'long',
                                type: 'div'
                            })
                        }
                    } else {
                        mui.toast('完整性校验失败', {
                            duration: 'long',
                            type: 'div'
                        })
                    }
                },
                error: (e) => {
                    mui.toast('请求异常,请稍后再试', {
                        duration: 'long',
                        type: 'div'
                    })
                },
            });
        },
        getDuration(value) {
            let minute = Math.floor(value/60) + ''
            let second = value%60 + ''
            if(minute.length == 1) {
                minute = '0' + minute
            }
            if(second.length == 1) {
                second = '0' + second
            }
            return minute + ":" + second
        },
        // 判断安卓还是ios
        compatibleInput() {
            //获取浏览器的userAgent,并转化为小写
            var ua = navigator.userAgent.toLowerCase();
            //判断是否是苹果手机，是则是true
            var isIos = ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1;
            if (isIos) {
                this.isflageIOX = true;
            } else {
                this.isflageIOX = false;
            }
        },
        home() {
            if(0 == this.showType) {
                $(location).attr("href", "../../Home.html");
            }else {
                this.showType = 0
                this.headerTitle = this.headerTitleMap[this.showType]
            }
        },
        createSgin(data) {
            let hashData = sm3(data);
            let hashData_last = sm3(hashData);
            hashData_last = hashData_last.substr(0, 5);
            hashData += hashData_last;
            let sign = hashData;
            return sign;
        },
    }
})
</script>
</body>
</html>
